<template>
	<!-- 目录 -->
	<view class="container">
		<toSafe :bgColor="'#fff'"></toSafe>
		<!-- 导航栏 -->
		<uni-nav-bar :fixed="true" @clickLeft="HandleLeft" leftIcon="left" :border="false" backgroundColor="#fff" :title="Title"></uni-nav-bar>
		<!-- 目录列表 -->
		<scroll-view scroll-y="true" class="ScrollView">
			<!-- 目录选项 -->
			<view class="DirectoryListItem" v-for="index in numPage" :key="index">
				<!-- 章节名称 -->
				<view class="NameBox" @click="toBookDetail(index)">
					<view class="Number">
						第 {{index}} 章
					</view>
					<!-- <view class="Name">
						猴王出世
					</view> -->
				</view>
				<!-- 更新时间 -->
				<!-- <view class="UpdateTitme">
					2017年6月22日 09:06
				</view> -->
			</view>
		</scroll-view>
	
	
	</view>
</template>

<script setup lang="ts">
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import toSafe from '@/compoents/top-safe.vue'
	// 导航栏标题
	const Title = ref<string>("目录")
	const HandleLeft = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	let numPage = ref(0),
		bookId = ref('');
	onLoad((e) => {
		bookId.value = e.bookId;
		if(e.pages) {
			numPage.value = e.pages - 0
		}
	})
	const toBookDetail = (index: number) => {
		uni.navigateTo({
			url: `/pages/bookDetalis/ready?page=${index}&id=${bookId.value}&pages=${numPage.value}`
		})
	}
</script>

<style lang="less">
	.container {
		min-height: 100vh;
		min-width: 100vw;
		background-color: #FFFFFF;
		// 目录列表
		.ScrollView{
			width: 100vw;
			height: calc(100vh - 88rpx);
			// 目录选项
			.DirectoryListItem{
				padding-top: 40rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				.UpdateTitme,.NameBox{
					width: calc(100vw - 28rpx - 28rpx);
				}
				.NameBox{
					display: flex;
					align-items: center;
					color: #000000;
					 font-family: "PingFang SC";
					 font-size: 28rpx;
					 font-style: normal;
					 font-weight: 400;
					 line-height: 40rpx;
					 .Name{
						 margin-left: 20rpx;
					 }
				}
				.UpdateTitme{
					margin-top: 10rpx;
					color: #000000;
					 font-family: "PingFang SC";
					 font-size: 24rpx;
					 font-style: normal;
					 font-weight: 400;
					 line-height: normal;
					 opacity: 0.4;
				}
			}
			
		}
	}
</style>